//获得了某个DOM节点，想在这个DOM节点内插入新的DOM
//两种情况，一种是将已有的某个节点添加到已获得的父节点上,实际上,是节点的转移（从原来节点的位置删除，在添加到父节点上）
// var list = document.getElementById("list");
// console.log(list);

// var js = document.getElementById("js");
// console.log(js);
// list.appendChild(js);


//但是更多时候是动态添加一个节点然后再把它添加到父节点
// var sql=document.createElement("p")
// sql.id=sql;
// sql.innerHTML='<span style="color: red;">Sql server</span>';
// list.appendChild(sql);



//动态地给文档添加了新的CSS定义：
//动态创建了一个<style>节点，然后把它添加到<head>节点的末尾

// var style = document.createElement("style");
// style.setAttribute("type","text/css");
// style.innerHTML="p{color : red;}";
// var head =document.getElementsByTagName("head")[0].appendChild(style);



//子节点插入到指定的位置怎么办.insertBefore()
//parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前

// var html = document.createElement("p"),
//  ref = document.getElementById("js"),
//  list = document.getElementById("list");

// html.id="ajkfjka";
// html.innerHTML="<span style='color: green;'>Sql server</span>";

// list.insertBefore(html,ref);



//父节点的children属性(注意不是方法)
//parentElement.children返回的是该父节点的子节点的集合
// var i,a=[],
// list = document.getElementById('test-list');
// var b = list.children;
// console.log(b);










